<!DOCTYPE html>
<style>
/* Flex it */
.container { display: flex; }

/* Make it pretty */
div, span {
  margin: 0.125em;
  padding: 0.125em;
  border-radius: 0.25em;
  list-style: none;
  color: white;
  text-align: center;
}
.container { background: #444; float: left; }
.container > * { background: #888; }
</style>


<div class="container">

    <!-- flex item: block child -->
    <div id="item1">block</div>

    <!-- flex item: floated element; floating is ignored -->
    <div id="item2" style="float: left;">float</div>

    <!-- flex item: anonymous block box around inline content -->
    anonymous item 3
    <!-- note that since it has no wrapper element this item can't be styled! -->

    <!-- flex item: inline child -->
    <span>
        item 4
        <!-- flex items do not split around blocks -->
        <q style="display: block" id=not-an-item>item 4</q>
        item 4
    </span>
</div>
